<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="//view.csslcloud.net/css/mobile.css?v1=20160706151521566"/>
    <link rel="stylesheet" type="text/css" href="//view.csslcloud.net/css/style.css?v=20160706151521566"/>
    <style>
        #livePlayer {
            height: 100%;
        }
    </style>
</head>
<body>
<div id="webPlayer" class="web">
    <div id="topHalf" class="section-top">
        <div id="dispArea" class="disp-area">
            <div id="video-box" class="video-container upper">
                <div class="video-box">

                    <!-- 直播视频模块 -->
                    <div id="livePlayer"></div>

                </div>
            </div>
        </div>
        <div style="display:none;" class="waiting-layer">
            <div>直播未开始</div>
        </div>
    </div>

    <div id="bottomHalf" class="section-bottom">
        <div class="gboxw">
            <a href="javascript:void(0);" class="gbtn"></a>
            <div class="gbox hide">
                <span class="gcion02"></span>
                <a href="javascript:void(0);" class="closegbox"></a>
                <div>暂无公告</div>
            </div>
        </div>
        <div class="tabs">
            <ul>
                <li><a href="javascript:void(0);">文档</a></li>
                <li name="announcement"><a href="javascript:void(0);">聊天</a></li>
                <li class="qare"><a href="javascript:void(0);">问答</a><span class="qatip">new</span></li>
                <div class="menu"></div>
            </ul>
        </div>
        <div class="slider-container">
            <div class="container imgbox">
                <div class="slider-bd allow-roll" id="ppts">
                    <div class="nodoc" id="noppt">
                        <p>暂无文档</p>
                    </div>

                    <!-- 直播文档模块 -->
                    <div id="drawPanel"></div>

                </div>
            </div>
            <div class="container chatBox">
                <div class="slider-bd allow-roll">
                    <ul id="chat_container" class="msg-list"></ul>
                </div>
                <div class="slider-ft chat-submit">
                    <a class="btn-phiz embtn" href="javascript:void(0);"><span class="icon-phiz"></span></a>
                    <a href="javascript:void(0);" class="chatlistbtn" for="all" id="chatlistbtn"></a>
                    <div class="chat-edit-area">
                        <input type="text" id="chat_input" placeholder="公聊模式,您的发言所有人可见" class="chat_input"/>
                    </div>
                    <button id="btn-chat-submit" onclick="chatSend();" class="submit-btn" type="submit">发送</button>
                    <div class="submit-tips" id="alert_container">
                        <strong>您已经被禁言您已经被禁言</strong><em>×</em>
                    </div>
                </div>
            </div>
            <div class="container chatBox">
                <div class="slider-bd allow-roll">
                    <ul class="qalist" id="questionInfo"></ul>
                </div>
                <div class="slider-ft chat-submit" id="question">
                    <a href="javascript:void(0);" class="myask"></a>
                    <div class="chat-edit-area">
                        <input id="qaV" type="text" placeholder="我要提问..." class="chat_input"/>
                    </div>
                    <button id="qaB" class="submit-btn" onclick="qaSend();" type="submit">发送</button>
                    <div class="submit-tips" id="qaMsg">
                        <strong></strong><em>×</em>
                    </div>
                </div>
            </div>
        </div>
        <div class="menuwrap">
            <div class="menubox allow-roll">
                <h3>切换线路:</h3>
                <ul class="line">
                </ul>
                <div class="danmubox">
                    <div class="btnl clearfix">
                        <span>音频模式:</span>
                        <a href="javascript:void(0);" class="soundbtn"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 签到 -->
    <div class="sign">
        <div class="siandiv">
            <div class="signline"></div>
            <div class="signicon"></div>
            <div class="signtxt"></div>
            <div class="signbtn">
                <button>我要签到</button>
            </div>
        </div>
        <div class="maskbg"></div>
    </div>

    <!-- 抽奖 -->
    <div class="lottery">
        <div class="lotterydiv">
            <div class="lotteryh3">正在抽奖</div>
            <div class="lotteryclose"></div>
            <div class="lotterynum"></div>
            <div class="lotterytext">请牢记您的中奖码</div>
            <div class="lotterybox">
                <div class="lotterytext2">中奖者</div>
                <div class="lotteryname"></div>
            </div>
        </div>
        <div class="maskbg"></div>
    </div>

    <!-- 答题 -->
    <div class="vote">
        <div class="votediv">
            <div class="vote-line"></div>
            <div class="vote-close"></div>
            <div id="vote1">
                <div class="vote-icon"></div>
                <h3>请选择答案</h3>
                <div class="vote-tips">题干部分请参考文档或直播视频</div>
                <ul class="vote-option">
                </ul>
            </div>
            <div id="vote2">
                <div class="vote-icon2"></div>
                <h3>答题统计</h3>
                <div class="vote-tips">答题结束，共<span id="vote-count"></span>人回答。</div>
                <div class="vote-a">
                    <span id="yansw">您的答案:<em></em></span>
                    <span id="cansw" class="vote-righta">正确答案:<em></em></span>
                </div>
                <ul class="vote-list">
                </ul>
            </div>
        </div>
        <div class="maskbg"></div>
    </div>
</div>
<input id="barrage" type="hidden" value="0"/>
<script src="//view.csslcloud.net/js/jquery-1.9.0.min.js?v=20160706151521566"></script>
<script src="js/handlebars.js"></script>
<script src="//view.csslcloud.net/js/touchSlide.js?v=20160706151521566"></script>
<script src="//view.csslcloud.net/js/jquery.panzoom.min.js?v=20160706151521566"></script>
<script src="//view.csslcloud.net/js/main.js?v=20160706151521566"></script>
<script src="js/liveSDK.js"></script>
<script src="js/chat_qa.js"></script>
<script src="js/cc.questionnaire.js"></script>
<script type="text/javascript">

    $(function () {
        DWLive.init({
            userid: localStorage.userid,
            roomid: localStorage.roomid,
            viewername: localStorage.viewername
        });

        $('.embtn').bind('touchend', function (e) {
            if ($('#embox').length > 0) {
                $('#embox').hide().remove();
            } else {
                var strFace;
                var path = 'http://view.csslcloud.net/img/em2_mobile/';
                if ($('#embox').length <= 0) {
                    strFace = '<div id="embox" style="position:absolute;z-index:1000;bottom:39px;left:0;">' +
                        '<table border="0" cellspacing="0" cellpadding="0"><tr>';
                    for (var i = 1; i <= 20; i++) {
                        strFace += '<td><img src="' + path + handleEm(i) + '.png" ontouchend="setEm(' + handleEm(i) + ')" /></td>';
                        if (i % 10 == 0) strFace += '</tr>';
                    }
                    strFace += '</table></div>';
                }
                $('.chatBox').append(strFace);

                e.stopPropagation();
            }
        });

        $('#alert_container').bind('touchend', function () {
            $(this).hide();
        });

        var m3u8 = null;
        DWLive.onLiveStarting = function () {
            m3u8 = DWLive.getLine(); // 获取线路
            $('.line').empty();
            $.each(m3u8, function (index, pd) {
                var acls = '';
                if (index == 0) {
                    acls = 'active';
                }
                $('.line').append('<li class="' + acls + '" pd="' + pd + '"><span></span>线路' + (index + 1) + '</li>');
            });

            $('.line li').click(function () {
                $('.line li').removeClass('active');
                $(this).addClass('active');

                // 线路切换
                DWLive.changeLine($('.line li').index($('.line li.active')));
            });

            // 音频模式
            var vdom = $('.video-box').html();
            window.ISAUDIOMODEL = false;
            $('.soundbtn').click(function () {
                window.ISAUDIOMODEL = !window.ISAUDIOMODEL;
                if (window.ISAUDIOMODEL) {
                    $(this).addClass('active');
                    $('.waiting-layer').show().html('<div>音频模式</div>');
                    $('.video-box').html('');

                    DWLive.onlyAudio();
                } else {
                    $(this).removeClass('active');
                    $('.waiting-layer').hide();

                    $('.video-box').html(vdom);

                    DWLive.onlyAudio();
                }
            });
        };


    });

    function handleEm(i) {
        if (i < 10) {
            return '0' + i;
        }
        return i;
    }

    function setEm(e) {
        var emstr = '[em2_' + handleEm(e) + ']';
        $('#embox').hide().remove();
        $('#chat_input').val(function () {
            return $(this).val() + emstr;
        });
    }

    $(document).bind('touchend', function () {
        while ($('#embox').length > 0) {
            $('#embox').hide().remove();
        }
    });

    window.onbeforeunload = function (e) {
        if (window.LivePlayer && window.LivePlayer.isPublishing) {
            return '您确定要离开直播间吗？';
        } else {
            if (!window.event) {
                return null;
            }
        }
    };

    // 获取播放器自定义背景图片
    DWLive.playerBackgroundImageUri = function (data) {
        console.log(data);
    };

    // 获取播放器自定义提示语
    DWLive.playerBackgroundHint = function (data) {
        console.log(data);
    };

    window.onorientationchange = function () {
        if (orientation == 0) {
            setTimeout(function () {
                var src = $('#dpa').attr('src');
                $('#dpa').attr('src', src);
            }, 100);
        }
    };

</script>
</body>
</html>